<template>
  <el-tabs v-model="activeName" style="width: 100%;height: 100%">
    <el-tab-pane
        v-for="(item, index) in codeResult"
        :key="index"
        :name="index"
        style="height: 100%;"
    >
      <span slot="label"><svg-icon :icon-class="getIcon(index)" :class-name="'type-icon'"/> {{ getTabName(index) }}</span>
      <!-- 点击复制 -->
      <el-link :underline="false" icon="el-icon-document-copy" style="float:right" @click="copyCode(item)">
        复制
      </el-link>
      <!-- 预览代码 -->
      <pre class="scroll-style select-text" style="height: 82%;width: 100%;overflow-y: auto">
        <code class="hljs" style="text-align: left;" v-html="highlightedCode(item, index)"/>
      </pre>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import {copyText} from "@/utils/common";
import hljs from "highlight.js/lib/core";
import "highlight.js/styles/github-gist.css";
import {TEL_TYPE} from "@/views/tool/genTemplate/toolConstants";

hljs.registerLanguage("java", require("highlight.js/lib/languages/java"));
hljs.registerLanguage("xml", require("highlight.js/lib/languages/xml"));
hljs.registerLanguage("html", require("highlight.js/lib/languages/xml"));
hljs.registerLanguage("vue", require("highlight.js/lib/languages/xml"));
hljs.registerLanguage("javascript", require("highlight.js/lib/languages/javascript"));
hljs.registerLanguage("sql", require("highlight.js/lib/languages/sql"));
hljs.registerLanguage("txt", require("highlight.js/lib/languages/plaintext"));
hljs.registerLanguage("php", require("highlight.js/lib/languages/php"));
hljs.registerLanguage("python", require("highlight.js/lib/languages/python"));

export default {
  name: "GenerateResult",
  props: {
    result: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      activeName: '',
      codeResult: {},
      catalogOption: TEL_TYPE
    }
  },
  watch: {
    'result': {
      handler(newVal) {
        this.initResult(newVal)
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    // 初始化代码生成结果数据
    initResult(resultData) {
      if (resultData) {
        this.codeResult = resultData
        this.activeName = Object.keys(this.codeResult)[0]
      }
    },
    // 复制代码
    copyCode(content) {
      if (content) {
        copyText(content)
      }
    },
    // tab名称
    getTabName(nameAndType) {
      return nameAndType.substring(0, nameAndType.lastIndexOf("."))
    },
    // 高亮显示
    highlightedCode(code, nameAndType) {
      let language = nameAndType.substring(nameAndType.lastIndexOf(".") + 1, nameAndType.length)
      if (!language) {
        language = 'txt'
      }
      const result = hljs.highlight(code, {language, ignoreIllegals: true})
      return result.value || '&nbsp;'
    },
    // 模板类型icon
    getIcon(nameAndType) {
      const type = nameAndType.substring(nameAndType.lastIndexOf(".") + 1, nameAndType.length)
      const target = this.catalogOption.find(item => item.value == type)
      return target ? target.icon : 'txt'
    }
  }
}
</script>

<style scoped>
.type-icon {
  font-size: larger;
}
</style>
